<!--
  * app小程序用户
  *
  * @Author:    M
  * @Date:      2024-10-18 20:45:10
  * @Copyright  Transmute实验室
-->
<template>
  <a-drawer :title="!!form.productId ? '编辑' : '添加'" width="600" :open="visibleFlag" @close="onClose" :maskClosable="false"
    :destroyOnClose="true">
    <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
      <a-form-item label="产品名称" name="productName">
        <a-input style="width: 100%" v-model:value="form.productName" placeholder="产品名称" />
      </a-form-item>
      <a-form-item label="联通价格" name="cuccPrice">
        <a-input-number style="width: 100%" v-model:value="form.cuccPrice" placeholder="联通价格" :min="0" />
      </a-form-item>
      <a-form-item label="电信价格" name="ctccPrice">
        <a-input-number style="width: 100%" v-model:value="form.ctccPrice" placeholder="电信价格" :min="0" />
      </a-form-item>
      <a-form-item label="移动价格" name="cmccPrice">
        <a-input-number style="width: 100%" v-model:value="form.cmccPrice" placeholder="移动价格" :min="0" />
      </a-form-item>
      <a-form-item label="企业" name="enterpriseId" v-if="!form.productId && userEmployeeType == EMPLOYEE_TYPE_ENUM.SYSTEM.value">
        <EnterpriseSelect width="100%" :init="false" v-model:value="form.enterpriseId" placeholder="企业" />
      </a-form-item>
    </a-form>

    <div class="footer">
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="onSubmit" :loading="loading">保存</a-button>
    </div>
  </a-drawer>
</template>
<script setup>
import { reactive, ref, nextTick, computed } from 'vue';
import _ from 'lodash';
import { message } from 'ant-design-vue';
import { productApi } from '/@/api/upstream/product/product-api';
import { smartSentry } from '/@/lib/smart-sentry';
import EnterpriseSelect from '/@/components/business/oa/enterprise-select/index.vue';
import { EMPLOYEE_TYPE_ENUM } from '/@/constants/common-const';
import { regular } from '/@/constants/regular-const';
import { useUserStore } from '/@/store/modules/system/user';

// 用户信息
const userStore = useUserStore();
// 员工类型
const userEmployeeType = computed(() => userStore.employeeType);
// 企业id
const userEnterpriseId = computed(() => userStore.enterpriseId);

// ------------------------ 事件 ------------------------

const emits = defineEmits(['reloadList']);

// ------------------------ 显示与隐藏 ------------------------
// 是否显示
const visibleFlag = ref(false);

function show(rowData) {
  Object.assign(form, formDefault);
  if (rowData && !_.isEmpty(rowData)) {
    Object.assign(form, rowData);
  }
  visibleFlag.value = true;
  nextTick(() => {
    formRef.value.clearValidate();
  });
}

function onClose() {
  Object.assign(form, formDefault);
  visibleFlag.value = false;
}

// ------------------------ 表单 ------------------------

// 组件ref
const formRef = ref();

const formDefault = {
  productId: undefined,
  productName: undefined,
  cuccPrice: undefined,
  ctccPrice: undefined,
  cmccPrice: undefined,
  enterpriseId: userEmployeeType.value == EMPLOYEE_TYPE_ENUM.ENTERPRISE.value ? userEnterpriseId.value : undefined,
};

let form = reactive(_.cloneDeep(formDefault));

const rules = {
  productName: [{ required: true, message: '产品名称必填' }],
  cuccPrice: [{ required: true, message: '联通价格必填' }],
  ctccPrice: [{ required: true, message: '电信价格必填' }],
  cmccPrice: [{ required: true, message: '移动价格必填' }],
  enterpriseId: [{ required: true, message: '企业必选' }],
};

// 保存按钮加载
const loading = ref(false);

// 点击确定，验证表单
async function onSubmit() {
  // 加载中
  loading.value = true;
  try {
    await formRef.value.validateFields();
    save();
  } catch (err) {
    message.error('参数验证错误，请仔细填写表单数据!');
    // 取消加载中
    loading.value = false;
  }
}

// 新建、编辑API
async function save() {
  try {
    if (form.productId) {
      await productApi.update(form);
    } else {
      await productApi.add(form);
    }
    message.success('操作成功');
    emits('reloadList');
    onClose();
  } catch (err) {
    smartSentry.captureError(err);
  } finally {
    // 取消加载中
    loading.value = false;
  }
}

defineExpose({
  show,
});
</script>
<style scoped lang="less">
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
</style>